<template>
	<view style="overflow-x: hidden;">
		<!-- <view class="bg">
			<image class="bg-img" src="@/static/img/bg.png" mode=""></image>
		</view>
		
		<view class="nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<image class="nav-back" src="@/static/img/back.png" mode="" @click="back"></image>
			<text class="nav-title">会员中心</text>
			<view class="nav-space"></view>
		</view>
		 -->
		<view class="info">
			<image class="info-bg" src="@/static/img/info-bg.png" mode=""></image>

			<view class="info-content">
				<view class="info-avatar">
					<image class="info-avatar-pic" :src="userInfo.avatar" mode="" style="border-radius: 50%;"></image>
				</view>
				<view class="info-name">
					<text class="info-name">{{userInfo.nickname}}</text>
					<text class="info-level">升级至尊会员享额外特权</text>
				</view>

			</view>
			<view class="info-asset" v-if="userInfo.level != 0">
				<view class="info-asset-item">
					<text class="iai-title">会员到期时间</text>
					<text class="iai-value">{{$u.timeFormat(userInfo.endtime, 'yyyy年mm月dd日')}}</text>
				</view>
				<!-- <view class="info-asset-item">
					<text class="iai-title">金币</text>
					<text class="iai-value">2563</text>
				</view>
				<view class="info-asset-item">
					<text class="iai-title">优惠券</text>
					<text class="iai-value">3</text>
				</view> -->
			</view>
		</view>

		<view class="main-title">
			<text>会员充值</text>
		</view>

		<scroll-view scroll-x>
			<view class="recharge">
				<view class="recharge-item" :class="current == index ? 'recharge-item-active': ''"
					v-for="(item, index) in rechargeOptions" :key="index" :style="{marginLeft: !index ? '30rpx': ''}"
					@click="rechargeChange(index)">
					<!-- <view class="recharge-tag" v-if="item.showTag">
						<text class="recharge-tag-text">限时特价 送豪礼</text>
					</view> -->
					<text class="recharge-item-duration">{{ item.name }}</text>
					<view class="recharge-item-price">
						<text class="rmb">￥</text>
						<text class="recharge-item-price-text">{{ item.price }}</text>
					</view>
					<!-- <text class="recharge-item-des" v-for="(desItem, desIndex) in item.des" :key="desIndex">{{ desItem }}</text> -->
					<view class="recharge-item-des">
						{{ item.day }} 天
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="button update" hover-class="hover" @click="pay">
			<text class="button-text">立即升级</text>
		</view>

		<!-- <text class="tip">升级得800金币</text> -->

		<!-- 		<view class="main-title">
			<text>会员特权</text>
		</view>

		<view class="privilege">
			<view class="privilege-item" v-for="(item, index) in privilegeList" :key="index" hover-class="hover"
				@click="privilegeClick(index)">
				<image class="privilege-item-pic" :src="item.pic" mode=""></image>
				<text class="privilege-item-text">{{ item.text }}</text>
			</view>
		</view> -->

		<!-- <view class="level">
			<view class="level-rate">
				<text class="level-rate-text1">当前返利比例</text>
				<text class="level-rate-text2">25%</text>
			</view>
			
			<view class="level-info">
				<image class="level-info-icon" src="@/static/img/vip.png" mode=""></image>
				<text class="level-info-text">V1至尊会员</text>
				<text class="level-info-integral">0</text>
			</view>
			
			<view class="level-distance">
				<text class="level-distance-text">距V1会员还有1250点</text>
				<view class="button level-distance-button" hover-class="hover">
					<text class="button-text">查看详情</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	import jweixin from '@/common/jweixin-module.js'

	import {
		userConfig
	} from '@/common/api.js'
	export default {
		data() {
			return {
				statusBarHeight,
				current: 0,
				rechargeOptions: [],
				privilegeList: [{
						pic: '/static/img/coin.png',
						text: '每日查询'
					},
					// {
					// 	pic: '/static/img/quan.png',
					// 	text: '大额神券'
					// },
					{
						pic: '/static/img/red-bag.png',
						text: '更多返利'
					},
					// {
					// 	pic: '/static/img/goods.png',
					// 	text: '精选商品'
					// },
					// {
					// 	pic: '/static/img/speed.png',
					// 	text: '极速到账'
					// },
					// {
					// 	pic: '/static/img/share.png',
					// 	text: '分享领券'
					// },
					{
						pic: '/static/img/active.png',
						text: '专享活动'
					},
					// {
					// 	pic: '/static/img/birthday.png',
					// 	text: '生日折扣'
					// },
					// {
					// 	pic: '/static/img/notic.png',
					// 	text: '上架提醒'
					// },
					{
						pic: '/static/img/kefu.png',
						text: '专属客服'
					}
				]
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.$userInfo
			}
		},
		onLoad() {
			userConfig().then(res => {
				this.rechargeOptions = JSON.parse(res.event)
			})
		},
		methods: {
			pay() {
				var info = this.rechargeOptions[this.current];
				uni.request({
					url: 'http://chatadmin.baimajingxuan.com/api/index/pay',
					method: 'GET',
					data: {
						'amount': Number(info.price),
						'type': "wechat",
						'method': "mp",
						'vipType': this.current + 1
					},
					header: {
						token: uni.getStorageSync('token')
					},
					success: data => {
						var data = data.data.data;
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: data.appId, // 必填，公众号的唯一标识
							timestamp: data.timeStamp, // 必填，生成签名的时间戳
							nonceStr: data.nonceStr, // 必填，生成签名的随机串
							signature: data.paySign, // 必填，签名，见附录1
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						});
						jweixin.ready(function() {
							// jweixin.checkJsApi({
							// 	jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
							// 	success: function(res) {
							// 		uni.showToast({
							// 			title: '支付成功1',
							// 			icon: 'none'
							// 		})
							// 	},
							// 	fail: function(res) {
							// 		uni.showToast({
							// 			title: '支付成功2',
							// 			icon: 'none'
							// 		})
							// 	}
							// });
							jweixin.chooseWXPay({
								timestamp: data
								.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
								nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
								package: data
								.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
								signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
								paySign: data.paySign, // 支付签名
								success: function(res) {
									uni.showToast({
										title: '支付成功',
										icon: 'none'
									})
								},
								cancel: function(res) {
									uni.showToast({
										title: '取消支付',
										icon: 'none'
									})
								},
								fail: function(res) {
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									})
								}
							});
						});

						// jweixin.error(function(res) {

						// });

					}
				})
			},
			pay1() {
				let self = this;
				uni.request({
					url: 'http://chatadmin.baimajingxuan.com/api/login/wechatJssdk',
					method: 'POST',
					success: data => {
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: data.data.appid, // 必填，公众号的唯一标识
							timestamp: data.data.timeStamp, // 必填，生成签名的时间戳
							nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
							signature: data.data.signature, // 必填，签名，见附录1
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						});
						jweixin.ready(function() {
							jweixin.checkJsApi({
								jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
								success: function(res) {

								},
								fail: function(res) {

								}
							});
							jweixin.chooseWXPay({
								timestamp: data.data
									.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
								nonceStr: data.data.nonceStr, // 支付签名随机串，不长于 32 位
								package: data.data
									.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
								signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
								paySign: data.data.signature, // 支付签名
								success: function(res) {
									uni.showToast({
										title: '支付成功',
										icon: 'success'
									})
								},
								cancel: function(res) {
									uni.showToast({
										title: '取消支付',
										icon: 'none'
									})
								},
								fail: function(res) {
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									})
								}
							});
						});

						// jweixin.error(function(res) {
						// 	console.log(res);
						// });

					}
				})
			},
			rechargeChange(index) {
				this.current = index
			},
			privilegeClick() {
				// uni.showToast({
				// 	icon: "none",
				// 	title: `选择了「${this.rechargeOptions[this.current].duration}」`
				// })
			},
			updateNow(index) {
				// uni.showToast({
				// 	icon: "none",
				// 	title: `点击了「${this.privilegeList[index].text}」`
				// })
				let uAgent = navigator.userAgent.toLowerCase();
				return /micromessenger/.test(uAgent) ? true : false;

				uni.request({
					url: 'http://chatadmin.baimajingxuan.com/api/login/wechatJssdk',
					method: 'POST',
					success: data => {
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: {
								"appid": data.data.appid,
								"noncestr": data.data.noncestr,
								"package": "Sign=WXPay",
								"partnerid": data.data.partnerid,
								"prepayid": data.data.prepayid,
								"timestamp": data.data.timestamp,
								"sign": data.data.signature
							},
							success: function(res) {
								setTimeout(function() {
									uni.hideLoading();
								}, 100);
								uni.showLoading({
									title: '跳转中',
								})
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/user/order_list?order_type=' +
											order_type
									});
								}, 1000);
							},
							fail: function(err) {
								uni.redirectTo({
									url: '/pages/user/order_list'
								});
							},
						})
					}
				})

			},
			back() {
				uni.showToast({
					icon: "none",
					title: "返回"
				})
			}
		}
	}
</script>


<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss">
	.main-title {
		padding: 30rpx 30rpx;
		font-size: 34rpx;
		color: #1C1C1C;
	}

	.tip {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #A5A3A2;
	}

	.rmb {
		font-size: 26rpx;
		color: #E3BE83;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 400rpx;
		z-index: -2;

		&-img {
			width: 100%;
			height: 100%;
		}
	}

	.hover {
		opacity: 0.7;
	}

	.nav {
		position: fixed;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 44px;
		padding: 0 30rpx;
		background-image: url('~@/static/img/nav-bg.png');
		background-size: 100%;
		z-index: 99;

		&-back {
			width: 20rpx;
			height: 40rpx;
		}

		&-title {
			color: #FFFFFF;
			font-size: 42rpx;
		}

		&-space {
			width: 70rpx;
			height: 40rpx;
		}
	}

	.info {
		position: relative;
		padding: 0 15rpx;
		width: 730rpx;
		height: 360rpx;
		background: url('/static/img/info-bg.png') no-repeat;
		background-size: 100% 100%;

		&-bg {
			position: absolute;
			width: 730rpx;
			height: 360rpx;
			z-index: -1;
		}

		&-content {
			padding: 70rpx 50rpx 0 50rpx;
			margin-bottom: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		&-avatar {
			margin-right: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 85rpx;
			height: 85rpx;
			background-color: #fff;
			padding: 1rpx;
			border-radius: 50%;

			&-pic {
				width: 83rpx;
				height: 83rpx;
			}
		}

		&-name {
			display: flex;
			flex-direction: column;
			color: #FFFFFF;
			font-size: 35rpx;
		}

		&-level {
			margin-top: 15rpx;
			font-size: 24rpx;
		}

		&-asset {
			padding: 0 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			&-item {
				display: flex;
				flex-direction: column;
			}
		}
	}

	.iai {
		&-title {
			margin-bottom: 20rpx;
			margin-right: 100rpx;
			font-size: 24rpx;
			color: #CFB386;
		}

		&-value {
			font-size: 35rpx;
			color: #FFFFFF;
		}
	}

	.recharge {
		position: relative;
		margin-bottom: 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		&-tag {
			position: absolute;
			top: -2rpx;
			left: -2rpx;
			width: 170rpx;
			height: 36rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background-image: url('~@/static/img/tag.png');
			background-size: 100%;

			&-text {
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}

		&-item {
			position: relative;
			padding: 40rpx 0;
			margin-left: 15rpx;
			width: 200rpx;
			height: 230rpx;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			border: solid 2rpx #F2F2F3;
			border-radius: 12rpx;

			&-active {
				border-color: #EDD2A9;
				background-color: #FBF1E5;
			}

			&-duration {
				margin-bottom: 30rpx;
				font-size: 26rpx;
				color: #1C1C1C;
			}

			&-price {
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: baseline;

				&-text {
					font-size: 48rpx;
					color: #E3BE83;
				}
			}

			&-des {
				font-size: 22rpx;
				color: #A5A3A2;
			}
		}
	}

	.button {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 85rpx;
		border-radius: 50rpx;
		background-image: linear-gradient(#EFCF9E, #E4BF85);

		&-text {
			font-size: 30rpx;
			color: #1C1C1C;
		}
	}

	.update {
		margin: 35rpx 30rpx 20rpx 30rpx;
	}

	.privilege {
		padding: 0 30rpx;
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;

		&-item {
			margin: 0 23rpx;
			margin-bottom: 25rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			&-pic {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}

			&-text {
				font-size: 24rpx;
				color: #383738;
			}
		}
	}

	.level {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		height: 466rpx;
		background-image: url('~@/static/img/vip-bg.png');
		background-size: 100%;

		&-rate {
			position: absolute;
			top: 43rpx;
			left: 33rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			&-text1 {
				margin-right: 20rpx;
				color: #1C1C1C;
				font-size: 34rpx;
			}

			&-text2 {
				font-size: 34rpx;
				color: #C07C07;
			}
		}

		&-info {
			// position: absolute;
			// top: 188rpx;
			// left: 350rpx;
			margin-top: 70rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			&-icon {
				margin-bottom: 20rpx;
				width: 48rpx;
				height: 38rpx;
			}

			&-text {
				margin-bottom: 20rpx;
				font-size: 26rpx;
				color: #292929;
			}

			&-integral {
				font-size: 40rpx;
				color: #C07C07;
			}
		}

		&-distance {
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 35rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			&-text {
				font-size: 26rpx;
				color: #292929;
			}

			&-button {
				padding: 0 30rpx;
				height: 60rpx;
			}
		}
	}
</style>
